<template>
  <!-- 添加批注对话框 -->
  <el-dialog append-to-body :title="'目标信息'" :visible.sync="visible" width="600px">
    <el-form :model="model" label-position="right" label-width="80px">
      <el-form-item v-for="attribute in model.attributes" :key="attribute.key" :label="attribute.key + ': '">
        <el-input v-model="attribute.value" maxlength="50" readonly />
      </el-form-item>
      <el-form-item label="错误类型" prop="errorType">
        <el-select
          v-model="model.errorType"
          @change="errorTypeSelectChanged"
          placeholder="请选择错误类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in errorOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="'目标批注: '">
        <el-input
          id="detailRemarkInput"
          maxlength="80"
          placeholder="请在此输入针对改目标的批注"
          v-model="model.remark"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleOk">提 交</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CommentDialog',
  props: {},

  data() {
    return {
      visible: false,
      // selectedObject
      model: {},

      // selectedObject
      errorOptions: [],
    }
  },

  created() {
    this.getDicts('mark_result_error_type').then((response) => {
      this.errorOptions = response.data
    })
  },

  computed: {},

  methods: {
    open(data) {
      this.model = data
      this.visible = true
      console.log('CommentDialog:open')
    },

    errorTypeSelectChanged(value) {
      for (let i = 0; i < this.errorOptions.length; i++) {
        if (this.errorOptions[i].dictValue === value) {
          this.model.remark = this.errorOptions[i].dictLabel
          return
        }
      }
      this.model.remark = '验'
    },

    // 更新批注信息（新增或删除批注）
    handleOk() {
      const id = model.a1 ? model.a1 + '' : model.mMarkAnnotationId + ''
      this.visible = false
      this.$emit('onOk', { id, remark: model.remark })
      this.$emit('update:visible', false)
    },

    handleCancel() {
      this.visible = false
      if (this.model.callback) {
        this.model.callback('cancel')
      }
      this.$emit('update:visible', false)
      this.$emit('onCancle', null)
    },
  },
}
</script>

<style></style>
